.detailsuser .header { background-color: #fff; height: 44px; line-height: 44px; position: sticky; width: 375px; left: 0; top: 0; z-index: 10000; border-bottom: 1px solid #f2f2f2; }

.detailsuser .header .header-wrap { display: flex; justify-content: space-between; padding: 0px 10px; height: 44px; line-height: 44px; font-size: 16px; color: #333; }

.detailsuser .header .header-wrap .title { flex: 1; text-align: center; }

.detailsuser .user { position: relative; }

.detailsuser .user .bg { background-size: 100%; height: 156px; position: relative; }

.detailsuser .user .bgs { background: rgba(0, 0, 0, 0.4); position: absolute; height: 100%; width: 100%; bottom: 0; z-index: 1; }

.detailsuser .user .info { display: flex; padding: 15px 12px; color: #e6e5e4; position: relative; z-index: 10; }

.detailsuser .user .info .img { width: 72px; height: 72px; margin-right: 12px; }

.detailsuser .user .info .img img { width: 100%; height: 100%; border-radius: 50%; }

.detailsuser .user .info .content { width: 250px; color: #fff; }

.detailsuser .user .info .content .title { font-size: 16px; margin-top: 4px; margin-bottom: 10px; }

.detailsuser .user .info .content .txt { font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.detailsuser .course { padding: 10px 15px; }

.detailsuser .course .title { display: flex; margin-top: 10px; }

.detailsuser .course .title .line { width: 4px; height: 16px; border-radius: 2px; margin-top: 2px; background-color: #ff7f02; }

.detailsuser .course .title h5 { padding-left: 5px; font-size: 14px; color: #383838; }

.detailsuser .course .content ul { margin-top: 15px; }

.detailsuser .course .content ul li { margin-bottom: 14px; width: 325px; height: 80px; padding: 10px; background-color: #fff; box-shadow: 0 0 10px #e8e8e8; display: flex; border-radius: 5px; overflow: hidden; }

.detailsuser .course .content ul li .img { position: relative; width: 80px; height: 80px; border-radius: 5px; overflow: hidden; }

.detailsuser .course .content ul li .img img { width: 100%; height: 100%; object-fit: cover; vertical-align: bottom; }

.detailsuser .course .content ul li .img .icons { padding: 3px 5px; text-align: center; background-color: #7ec032; font-size: 10px; position: absolute; top: 0; left: 0; color: #fff; top: -4px; left: -5px; transform: scale(0.7); }

.detailsuser .course .content ul li .img .icon { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; width: 26px; background: url(http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play.png); background-size: 100%; height: 26px; display: inline-block; }

.detailsuser .course .content ul li .img .video-count { position: absolute; bottom: 4px; left: 4px; color: #fff; font-size: 10px; }

.detailsuser .course .content ul li .text { margin-left: 10px; width: 237px; }

.detailsuser .course .content ul li .text h2 { color: #1e1e1e; font-size: 14px; font-weight: bold; margin-bottom: 6px; }

.detailsuser .course .content ul li .text span { color: #939393; font-size: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
